<template>
  <div class="vocation-container">
    <el-tabs type="card">
      <el-tab-pane label="请假列表">
        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="请假列表"
                 @search-method="handleGetSearchActivityLeave"
        />

        <el-table
            :border="true"
            :data="list"
            highlight-current-row
            max-height="680"
            style="width: 100%"
            align="center"

        >
          <el-table-column
              label="序号"
              type="index"
              width="50"
          />
          <el-table-column
              v-for="(item,index) in settings"
              :prop="index"
              :label="item"
              :key="item"
              v-if="index!=='activityAddress'"
          />

          <el-table-column label="活动地点">
            <template slot-scope="scope">
              <span>{{
                  scope.row.activityAddress|toJsonParse|address
                }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import navBtn from "@/components/navBtn";
import { SHEET_NAME } from "@/utils/publicinfo";

export default {
  components: {
    navBtn,
  },

  data () {
    return {
      activityLeaveList: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      reasonShow: false,
      options: {
        xlsxHeader: SHEET_NAME.ACTIVITY_lEAVE_LIST,
        xlsxSheet: [],
      },
      settings: {
        "activityleaveId": "活动ID",
        "activityleaveDatetime": "请假时间",
        "activityleaveReason": "请假理由",
        "volunteerName": "姓名",
        "activityName": "活动名称",
        "activityAddress": "活动地点",
        "activityDatetime": "活动日期",
      },
    };
  },
  mounted () {
    this.handleGetActivityLeaveInfo();
  },
  computed: {
    list () {
      const activityLeaveList = this.activityLeaveList;
      let _list = [];
      _list = activityLeaveList.map(value => {
        return {
          "activityleaveId": value.activityleaveId,
          "activityleaveDatetime": value.activityleaveDatetime,
          "activityleaveReason": value.activityleaveReason,
          "volunteerName": value.volunteerEntity?.volunteerName,
          "activityName": value.activityEntity.activityName,
          "activityAddress": value.activityEntity.activityAddress ??= "",
          "activityDatetime": value.activityEntity.activityDatetime ??= "",
        };
      });
      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { list } = this;
      let _list = list.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  methods: {
    // 分页查询全部待审核活动
    async handleGetActivityLeaveInfo () {
      const res = await this.$http.managerGetLeave({
        status: 1,
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      console.log(res);
      if (res.code !== 0) return null;
      this.activityLeaveList = res.data.list;
      this.total = res.data.totalCount;
    },

    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetActivityLeaveInfo();

    },

    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      const res = await this.$http.handleGetActivityLeaveInfo(params);
      if (res.code !== 0) return null;
      this.content = res.data;

    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      let pageNum = this.currentPage;
      const pageSize = this.currentPageSize;
      pageNum = num;
      // console.log(pageNum, pageSize)
      const res = await this.$http.activityAll({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleGetSearchActivityLeave () {

    },
    async format () {

    },
  },
};
</script>
